import React, { Component, PropTypes } from 'react'
import {Card, Row, Col, Form, Icon, Input, Button, Checkbox} from 'antd';
const FormItem = Form.Item;
class Login extends Component {
    constructor(props) {
        super(props);
        this.state = {
            userName:null,
            userPass:null
        }
    }
    nameChange = (dom) => {
        this.setState({
            userName: dom.target.value
        })
    }
    passwordChange = (dom) => {
        this.setState({
            userPass: dom.target.value
        })
    }
    loginClick = (e) =>{
        e.preventDefault()
        apiInfo({
            path: '/v1/session/',
            method: 'post',
            params:this.state,
            cmd:'signIn',
        }).then((data) => {
            console.log(data)
        })
    }
    render() {
        return (
            <div style={{height: '100%', width: '100%', background: '#ECECEC'}}>
                <Row type="flex" justify="space-around" align="middle">
                    <Col span={6}>
                        <Card bordered={false} style={{width: 400, height: 200, marginTop: "50%"}}>
                            <Form>
                                <FormItem>
                                    <Input value={this.state.userName} onChange={this.nameChange.bind(this)} prefix={<Icon type="user" style={{fontSize: 16}}/>} placeholder="用户名"/>
                                </FormItem>
                                <FormItem>
                                    <Input value={this.state.userPass} onChange={this.passwordChange.bind(this)} type="password" prefix={<Icon type="lock" style={{fontSize: 16}}/>} placeholder="密码"/>
                                </FormItem>
                                <FormItem>
                                    <Button  type="primary" onClick={this.loginClick} className="login-form-button">
                                            登录
                                    </Button>
                                </FormItem>
                            </Form>
                        </Card>
                    </Col>
                </Row>
            </div>
        )
    }
}

export default Login
